<template>
    <div id="breadcrumb" class="display-inline">
        <router-link v-if="disabled === false" :to="to" class="text-default a-no-t" :disabled="disabled">
            <i v-if="icon != 'no'" class="fa p-r-5" :class="icon + ' ' + active"></i>
            <slot></slot>
        </router-link>

        <a v-if="disabled === true" :herf="to" class="text-muted a-no-t" :disabled="disabled">
            <i v-if="icon != 'no'" class="fa p-r-5" :class="icon + ' ' + active"></i>
            <slot></slot>
        </a>
        <span v-if="cut" class="p-5">{{separator}}</span>
    </div>
</template>

<script>
    export default {
    	name: 'Breadcrumb',
        props: {
            to: {},
            text: {},
            active: {type: String, default: 'active'},
            icon: {default: 'no'},
            disabled: {type: Boolean, default: false},
            separator: {default: '/'},
            cut: {type: Boolean, default: false}
        }
    };
</script>
